<script setup >

import {addArticleLike, addCollectAndLike, getArticleById, getIsCollect, getIsLoveStar} from "@/api/article.js"
import {onMounted, ref} from "vue";
import { MdPreview, MdCatalog } from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';
import 'md-editor-v3/lib/preview.css';
import useUserStore from "@/stores/user.js";
const userStore = useUserStore()
import MyComment from "@/components/articleExample/MyComment.vue";
import {ElMessage} from "element-plus";
import router from "@/router/index.js";
const props = defineProps(['articleId']);
const drawer = ref(false)
const isChange = ref(true)
const isLike = ref(true)
const content = ref("");
const id = 'preview-only';
const getMedicineId = Number(props.articleId);
const scrollElement = document.documentElement;
const isShow = ref(false)
function edBut(){
  isShow.value = true
}


async function isCollect(falg){
  if (await checkLogin()){
    const data ={
      articleId:props.articleId,
      //收藏
      status:falg
    }

    await addCollectAndLike(data)
    isChange.value = 'true' !== falg;
    if (isChange.value){
      ElMessage.success("取消成功")
    }else {
      ElMessage.success("收藏成功")
    }
  }

}
//校验登录
async function checkLogin(){
  if (userStore.token === undefined || userStore.token === '' || userStore.token === null){
    ElMessage.success("请先登录")
    await router.push("/login")
    return false
  }
  return true
}
//文章点赞
async function addLike(flag){
  if (await checkLogin()){
    const da ={
      articleId:props.articleId,
      //点赞
      status:flag
    }
    await addArticleLike(da)

    isLike.value = 'true' !== flag;
    if (isLike.value){
      ElMessage.success("取消成功")
    }else {
      ElMessage.success("点赞成功")
    }
  }
}

function showDrawer(){
  if (checkLogin()){
    drawer.value=true
  }

}
async function getArticle(){
  const {data:{data}} = await getArticleById(props.articleId)
  content.value = data.content
  console.log("content.value",content.value)
}
//查询当前文章是否被收藏
async function collect(){
  const {data:{data}} = await getIsCollect(props.articleId)
  isChange.value = !data
}
//查询当前文章是否被当前用户点赞
async function loveStar() {
  const {data:{data}} = await getIsLoveStar(props.articleId)
  isLike.value = !data
}
onMounted(() => {
  getArticle()
  collect()
  loveStar()
});
</script>

<template>
  <div class="ed-md">
    <MdPreview  :id="id"  :modelValue="content" />
<!--目录弹框-->
    <el-drawer
        v-model="isShow"
        :with-header="false"
    >
      <MdCatalog :editorId="id" :scrollElement="scrollElement" />
    </el-drawer>

    <div class="my-affix">
      <!--目录-->
      <el-affix class="ed-but" >
        <el-icon @click="edBut"  :size="20">
          <svg t="1741615059974" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5084" width="20" height="20"><path d="M91.89 238.457c-29.899 0-54.133 24.239-54.133 54.134 0 29.899 24.234 54.137 54.133 54.137s54.138-24.238 54.138-54.137c0-29.896-24.239-54.134-54.138-54.134z" fill="#E5594F" p-id="5085"></path><path d="M91.89 462.463c-29.899 0-54.133 24.239-54.133 54.139 0 29.895 24.234 54.133 54.133 54.133s54.138-24.238 54.138-54.133c0-29.9-24.239-54.139-54.138-54.139z" fill="#C45FA0" p-id="5086"></path><path d="M91.89 686.475c-29.899 0-54.133 24.237-54.133 54.133 0 29.899 24.234 54.138 54.133 54.138s54.138-24.238 54.138-54.138c0-29.896-24.239-54.133-54.138-54.133z" fill="#F39A2B" p-id="5087"></path><path d="M941.26 234.723H328.964c-28.867 0-52.263 23.4-52.263 52.268v3.734c0 28.868 23.396 52.269 52.263 52.269H941.26c28.869 0 52.269-23.401 52.269-52.269v-3.734c-0.001-28.868-23.4-52.268-52.269-52.268z" fill="#F0D043" p-id="5088"></path><path d="M941.26 682.74H328.964c-28.867 0-52.263 23.399-52.263 52.268v3.734c0 28.863 23.396 52.269 52.263 52.269H941.26c28.869 0 52.269-23.405 52.269-52.269v-3.734c-0.001-28.868-23.4-52.268-52.269-52.268z" fill="#4A5699" p-id="5089"></path><path d="M709.781 458.729H328.964c-28.867 0-52.263 23.4-52.263 52.269v3.734c0 28.873 23.396 52.269 52.263 52.269h380.817c28.866 0 52.271-23.396 52.271-52.269v-3.734c0.001-28.869-23.405-52.269-52.271-52.269z" fill="#E5594F" p-id="5090"></path></svg>
        </el-icon>
      </el-affix>
      <!--点击评论弹框-->
      <el-affix class="ed-but" >
        <el-icon  @click="showDrawer" :size="20">
          <svg t="1741615101034" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6338" width="20" height="20"><path d="M193 317h-29a6 6 0 0 0-6 6v408a6 6 0 0 0 6 6h83.806v121.532a6 6 0 0 0 10.195 4.29L386.698 737h200.66l60.159 58.815A66.346 66.346 0 0 1 635 797H411.154L299.945 905.725c-26.064 25.482-67.85 25.01-93.332-1.054a66 66 0 0 1-18.807-46.14V797H164c-36.45 0-66-29.55-66-66V323c0-36.45 29.55-66 66-66h29v60z m642.194 449.532a66 66 0 0 1-18.807 46.139c-25.482 26.064-67.268 26.536-93.332 1.054L582.183 676H299c-36.45 0-66-29.55-66-66V164c0-36.45 29.55-66 66-66h560c36.45 0 66 29.55 66 66v446c0 36.45-29.55 66-66 66h-23.806v90.532z m-60-150.532H859a6 6 0 0 0 6-6V164a6 6 0 0 0-6-6H299a6 6 0 0 0-6 6v446a6 6 0 0 0 6 6h307.64L765 770.822a6 6 0 0 0 10.194-4.29V616z" fill="#2F54EB" p-id="6339"></path><path d="M757.5 384.5m0-49.5a49.5 49.5 0 1 0 0 99 49.5 49.5 0 1 0 0-99Z" fill="#85A5FF" p-id="6340"></path><path d="M575.5 384.5m0-49.5a49.5 49.5 0 1 0 0 99 49.5 49.5 0 1 0 0-99Z" fill="#85A5FF" p-id="6341"></path><path d="M392.5 384.5m0-49.5a49.5 49.5 0 1 0 0 99 49.5 49.5 0 1 0 0-99Z" fill="#85A5FF" p-id="6342"></path></svg>
        </el-icon>
      </el-affix>

      <!--收藏-->
      <el-affix  class="ed-but"  >

        <el-icon v-if="isChange" @click="isCollect('true')" :size="20">
          <svg t="1741615230310" class="icon" viewBox="0 0 1168 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7427" width="20" height="20"><path d="M327.314956 97.793533C200.770124 97.793533 97.793533 205.953181 97.793533 338.854593c0 81.853187 40.095349 140.822688 79.017175 198.129699 94.175173 139.257992 330.346556 325.261292 408.581383 382.568303 72.269421-53.493063 310.396675-241.35444 408.288002-381.981542l3.618361-5.672025c35.98802-56.329075 73.149563-114.418434 73.149563-193.044435C1070.448017 205.855388 966.20011 97.793533 838.286168 97.793533c-67.868712 0-134.759489 33.152008-179.059959 88.600942l-77.550272 97.011185-76.181163-98.184708A224.142779 224.142779 0 0 0 327.314956 97.793533m0-97.793533A321.740725 321.740725 0 0 1 582.849459 125.273516C643.970417 48.70118 737.167655 0 838.286168 0c183.558462 0 329.955382 153.144673 329.955382 338.854593 0 111.386835-53.199682 190.306216-93.197237 252.894078-125.077929 181.01583-433.714321 408.483589-447.014241 417.773974a71.095899 71.095899 0 0 1-42.540188 13.886682 71.095899 71.095899 0 0 1-42.63798-13.886682c-13.299921-9.290386-324.674531-236.660351-447.014241-417.773974C53.199682 529.160809 0 450.241428 0 338.854593 0 153.144673 146.39692 0 327.314956 0z" fill="#FF0000" p-id="7428"></path></svg>
        </el-icon>

        <el-icon v-else @click="isCollect('false')" :size="20">
          <svg t="1741615341535" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7641" width="20" height="20"><path d="M707.584 93.184c-77.312 0-148.992 38.912-196.608 102.912-47.104-64-119.296-102.912-196.608-102.912-139.264 0-252.416 123.904-252.416 275.968 0 90.624 40.448 154.624 73.216 205.824C229.888 723.968 468.48 908.8 478.72 916.48c9.728 7.68 20.992 11.264 32.256 11.264s22.528-3.584 32.256-11.264c10.24-7.68 248.32-193.024 343.552-341.504 32.768-51.2 73.216-115.2 73.216-205.824 0-152.064-113.152-275.968-252.416-275.968z" fill="#d81e06" p-id="7642"></path></svg>
        </el-icon>
      </el-affix>
      <!--点赞-->
      <el-affix class="ed-but"   >

        <el-icon v-if="isLike" @click="addLike('true')" :size="20">
          <svg t="1741615460895" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8711" width="20" height="20"><path d="M424.6 811.9c13.4 0 24.3-10.9 24.3-24.3V631c0-13.4-10.9-24.3-24.3-24.3s-24.3 10.9-24.3 24.3v156.6c-0.1 13.4 10.8 24.3 24.3 24.3z" fill="#FF4E7D" p-id="8712"></path><path d="M875.2 467.3c-12.4-16-31.1-25.2-51.3-25.2H598.8c-4.3 0-7.8-1.9-10-5.6-2.2-3.7-2.2-8.1-0.2-12 14.1-26 22.8-52 26-77.1 3.7-29.1 10.1-123.8-8.9-175.9-5.2-14.5-18.9-52.9-72.5-56.2h-0.7l-0.7 0.1c-25.2 1.9-44.5 11-57.5 27.1-10.5 13-13.9 27-15.6 33.8-2.1 8.3-4.2 17.9-6.4 28.1l-0.2 0.7c-8.5 38.7-20.1 91.8-40.5 127.3-32.9 57.5-103.8 98.1-127.1 110.2-1.1-0.1-2.2-0.1-3.3-0.1h-92.1c-28.6 0-52 23.3-52 52v364.3c0 28.6 23.3 52 52 52h92.1c0.8 0 1.7 0 2.6-0.1l455.8-0.4c27.5 0 51.5-18.6 58.5-45.3l88.4-341.6c5.2-19.7 1.1-40.1-11.3-56.1z m-546.4 6c35-20.9 93.6-61.7 125.1-116.8 24-42 36.6-99.3 45.8-141.1 2.4-10.9 4.4-19.8 6.3-27.6 2.8-11.3 5.4-21.9 26.8-23.8 19.1 1.5 22.5 10.9 28 26.4 12.1 33 11 108.9 5.6 150.9-2.4 19.1-9.4 39.4-20.6 60.1-10.3 19-9.8 41.5 1.2 60 10.9 18.4 30.3 29.3 51.8 29.3h225.1c5 0 9.7 2.3 12.8 6.3s4.1 9.1 2.8 14.1l-88.4 341.6c-1.3 5.2-6 8.8-11.4 8.8l-406.5 0.4c0.1-1.1 0.1-2.1 0.1-3.2V494.4c0-7.3-1.6-14.5-4.5-21.1z m-142.9 21.1c0-1.8 1.5-3.3 3.3-3.3h92.1c1.8 0 3.3 1.5 3.3 3.3v364.3c0 1.6-1.1 3-2.7 3.3h-11.5l-5 0.1h-76.2c-1.8 0-3.3-1.5-3.3-3.3V494.4z" fill="#4E30DC" p-id="8713"></path></svg>
        </el-icon>

        <el-icon v-else @click="addLike('false')" :size="20">
          <svg t="1741615514765" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8922" width="20" height="20"><path d="M960.5 487.4c0-47-38.1-85.1-85.1-85.1H661.5c18.6-59.1 50.9-193.8-32.1-283.7-55.6-60.2-107.7 8.1-107.7 8.1S578.4 369.9 341 477.5v402.8h449.9c47 0 85.1-38.1 85.1-85.1v-7.1c26.9-14.3 45.2-42.6 45.2-75.2V705c0-9.3-1.5-18.2-4.2-26.5 20.2-15.6 33.2-40 33.2-67.4v-7.9c0-17.6-5.4-34-14.6-47.6 15.4-15.4 25-36.7 25-60.2v-8z" fill="#E5ECFF" p-id="8923"></path><path d="M370.2 928.5H95.5C79.8 928.5 67 915.7 67 900V424.3c0-15.7 12.8-28.5 28.5-28.5h274.7c15.7 0 28.5 12.8 28.5 28.5V900c0 15.7-12.8 28.5-28.5 28.5z" fill="#5B79FB" p-id="8924"></path><path d="M960.5 487.4c0-47-38.1-85.1-85.1-85.1h-83c1.3 13.9 2 28 2 42.3 0 208.8-141.8 384.4-334.3 435.8h330.8c47 0 85.1-38.1 85.1-85.1v-7.1c26.9-14.3 45.2-42.6 45.2-75.2v-7.9c0-9.3-1.5-18.2-4.2-26.5 20.2-15.6 33.2-40 33.2-67.4v-7.9c0-17.6-5.4-34-14.6-47.6 15.4-15.4 25-36.7 25-60.2v-8.1z" fill="#C7D8FF" p-id="8925"></path><path d="M349.1 823.8c0 25.6-20.7 46.3-46.3 46.3s-46.3-20.7-46.3-46.3c0-25.6 20.7-46.3 46.3-46.3s46.3 20.7 46.3 46.3z" fill="#FFFFFF" p-id="8926"></path><path d="M850 86.9c-3.6-10.5-9.5-10.5-13 0l-20.1 59.3c-3.6 10.5-15.1 22-25.6 25.6l-58.9 20c-10.5 3.6-10.5 9.5 0 13.1l58.5 20.4c10.5 3.6 22 15.2 25.6 25.7l20.4 59.4c3.6 10.5 9.5 10.5 13 0l19.9-59.1c3.5-10.5 15-22.1 25.5-25.7l59.8-20.5c10.5-3.6 10.5-9.4 0-13l-58.8-19.9c-10.5-3.6-22.1-15-25.7-25.5L850 86.9z" fill="#FF7E71" p-id="8927"></path></svg>
        </el-icon>

      </el-affix>
    </div>
    <!--评论对话框-->
    <el-drawer v-model="drawer" :with-header="false" title="留言框" size="40%">
      <MyComment  :momentId="getMedicineId"/>
    </el-drawer>
  </div>
</template>

<style scoped>
.ed-md{
  margin: 0 30px 30px;
}

.my-affix{
  position: fixed;
  right: 20px;
  top: 10vh;
}
.ed-but{
  cursor: pointer;
  margin: 30px 0;
}
</style>